<template>
  <div>
  <nav-header></nav-header> 
  <nav-bread>
    <span>Goods</span>
  </nav-bread>
  <div class="accessory-result-page accessory-page">
    <div class="container">
      <div class="filter-nav">
        <span class="sortby">Sort by:</span>
        <a href="javascript:;" class="default cur">Default</a>
        <a href="javascript:;" class="price" @click="sortGoods">Price <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg></a>
        <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
      </div>
      <div class="accessory-result">
      <!-- filter -->
      <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
        <dl class="filter-price">
          <dt>Price:</dt>
          <dd><a href="javascript:void(0)" v-bind:class="{'cur':priceChecked == 'all'}" @click="setPriceFilter('all')">All</a></dd>
          <dd v-for="(price,index) in priceFilter">
            <a href="javascript:;" @click="setPriceFilter(index)" v-bind:class="{'cur':priceChecked==index}">{{price.startPrice}} - {{price.endPrice}}</a>
          </dd>
        </dl>
      </div>

      <!-- search result accessories list -->
      <div class="accessory-list-wrap">
        <div class="accessory-list col-4">
          <ul>
            <li v-for="(item,index) in goodsList">
              <div class="pic">
                <a href="#"><img :src="'/static/'+item.productImage" alt=""></a>
              </div>
              <div class="main">
                <div class="name">{{ item.productName}}</div>
                <div class="price">{{ item.salePrice}}</div>
                <div class="btn-area">
                  <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                </div>
              </div>
            </li>
          </ul>
          <div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30">
              <img src="./../assets/loading-spinning-bubbles.svg" v-show="loading">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>
  <nav-footer></nav-footer>
</div>


  </div>
  
</template>

<script>
  import './../assets/css/base.css';
  import './../assets/css/product.css';
  import NavHeader from '@/components/Header.vue';
  import NavFooter from '@/components/NavFooter.vue';
  import NavBread from '@/components/NavBread.vue';
  import axios from 'axios';
  export default {
      data () {
        return{
          goodsList:[],
          priceFilter:[
            {
              startPrice:'0.00',
              endPrice:'100.00'
            },
             {
              startPrice:'100.00',
              endPrice:'500.00'
            },
            {
              startPrice:'500.00',
              endPrice:'1000.00'
            },
            {
              startPrice:'1000.00',
              endPrice:'5000.00'
            }
          ],
          priceChecked:'all',
          filterBy:false,
          overLayFlag:false,
          sortFlag:true,
          page:1,
          pageSize:4,
          busy:true,
          loading:false
        }
      },
      components: {
        NavHeader,
        NavFooter,
        NavBread
      },
      mounted() {
        this.getGoosList(false);
      },
      methods: {
        getGoosList(flag){
          var param = {
            page:this.page,
            pageSize:this.pageSize,
            sort:this.sortFlag?1:-1,
            priceLevel:this.priceChecked
          };
          //请求之前展示loading效果
          this.loading = true;
          axios.get("goods",{params:param}).then((result)=>{
            //请求之后隐loading
            this.loading = false;

            var res = result.data
            if(res.status == "0"){
              //滚动时需要累加 concat
              if(flag){
                this.goodsList = this.goodsList.concat(res.result.list);
                //没有数据时禁止滚动条滚动
                if(res.result.count == "0"){
                    this.busy = true;
                }else{
                    this.busy = false;
                }
              }else{
                this.goodsList = res.result.list;
                this.busy = false;
              }
            }else{
              this.goodsList = [];
            }
          })
        },
        //价格排序
        sortGoods(){
          this.sortFlag = !this.sortFlag;
          this.page = 1;
          this.getGoosList();
        },
        loadMore(){
            this.busy=true;
            setTimeout(() => {
              this.page++;
              this.getGoosList(true);
            }, 500);
        },
        setPriceFilter(index){
          this.priceChecked = index,
          this.page = 1;  
          this.getGoosList();
        },
        addCart(productId){
          axios.post("/goods/addCart",{productId:productId})
          .then((result)=>{
            let res= result.data;
            console.log(res);
            if(res.status==0){
              alert("加入成功");
            }else{
              alert("msg"+res.msg);
            }
          });
        },
        showFilterPop(){
          this.filterBy = true,
          this.overLayFlag = true
        },
        closePop(){
          this.filterBy = false,
          this.overLayFlag = false
        }
      }
  }

</script>
<style>
   @import '../assets/css/base';
   @import '../assets/css/product';
</style>